import React, { useState } from "react";
import ChatList from "./views/ChatList";
import ContactList from "./views/ContactList";
import MePage from "./views/MePage";
import DiscoverPage from "./views/DiscoverPage"; // 新增
import TabBar from "./components/TabBar";

const App: React.FC = () => {
  const [activeTab, setActiveTab] = useState<
    "chat" | "contact" | "discover" | "me"
  >("chat");

  return (
    <div className="flex flex-col h-screen max-w-md mx-auto bg-gray-100">
      <div className="flex-1 overflow-y-auto">
        {activeTab === "chat" && <ChatList />}
        {activeTab === "contact" && <ContactList />}
        {activeTab === "discover" && <DiscoverPage />} {/* 新增 */}
        {activeTab === "me" && <MePage />}
      </div>
      <TabBar activeTab={activeTab} onTabChange={setActiveTab} />
    </div>
  );
};

export default App;
